﻿@{
    Layout = "Admin_Layout";
    ViewData["Title"] = "养宠知识";
}
@section Style {
    <style>
    </style>
}
<div style="margin-left:20px;margin-right:20px;">
    <el-row  style="margin-top:-15px;background-color:white;" :gutter="15" class="input-box">
        <el-col :span="6" v-for="(co, indexCo) in imgs" :style="{'margin-top':indexCo<4?cc2:cc}">
            <el-card style="box-shadow:none;">
                <div><span :style="{'color':aa}">名字：</span>{{ co.a }}</div>
            </el-card>
        </el-col>
    </el-row>
    <div ref="zz">
        <div>默认数据</div>
    </div>
    <div>
        <el-button size="mini"  @@click="myfun">编辑</el-button>
    </div>
</div>
@section Scripts {
    <script>
        var app = new Vue({
            el: "#app",
            mounted: function () {
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                myfun(){
                    let mm = document.createElement('div');
                    mm.innerHTML = '<div :style="{\'margin-top\':cc}">追加</div>';
                    this.$refs.zz.appendChild(mm);
                },
            },
            data() {
                return {
                    cc:'20px',
                    cc2:'20px',
                    aa: '#efefef',
                    defaultMenuActive: '2',
                    imgs: [{ "a": "a1" }, { "a": "a12" }, { "a": "a122" }, { "a": "a1222" }, { "a": "a1222222" }, { "a": "a133333" }, { "a": "a1" }, { "a": "a12" }, { "a": "a122" }, { "a": "a1222" }, { "a": "a1222222" }, { "a": "a133333" }],
                }
            }
        });
    </script>
}